<template>
  <div class="user">
    <search-market ref="searchMarket" @search="search" @output="output"></search-market>
    <div class="pageBox">
      <el-pagination
        background
        layout="total"
        :total="total"
        style="display:inline-block;vertical-align: top;"
      ></el-pagination>
      <!-- <el-button type="success" size="small" icon="el-icon-circle-plus" @click="add">新增</el-button>
      <el-button type="info" size="small" plain icon="el-icon-tickets">导出表格</el-button>-->
    </div>
    <el-table border :data="tableData" stripe style="width: 100%">
      <el-table-column prop="posionID" align="center" label="岗位ID"></el-table-column>
      <el-table-column prop="operatorID" align="center" label="操作员ID"></el-table-column>
      <el-table-column prop="validationDays" align="center" label="有效期天数"></el-table-column>
      <el-table-column prop="protectionDays" align="center" label="保护期天数"></el-table-column>
      <el-table-column prop="distributeTimes" align="center" label="成交次数"></el-table-column>
      <el-table-column prop="distributeAmount" align="center" label="成交总金额"></el-table-column>
      <el-table-column prop="isPersonalDistributor" align="center" label="是否是个性推广员">
        <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.isPersonalDistributor===0">是</el-tag>
            <el-tag size="small" v-else-if="scope.row.isPersonalDistributor===1">否</el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="totalIncome" align="center" label="绩效总额"></el-table-column>
      <el-table-column prop="belongToCompany" align="center" label="合作机构"></el-table-column>
      <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
      <el-table-column prop="applyForComments" align="center" label="申请备注" width="150px">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="detail(scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="kickOut(scope.row)">清退</el-button>
        </template>
      </el-table-column>
    </el-table>
<el-dialog title="编辑" :visible.sync="dialog1" width="450px" :modal-append-to-body="false">
      <el-form :model="form1"  ref="form1" label-width="110px">
      <el-form-item label="岗位" prop="positionID">
                        <el-select v-model="form1.positionID" placeholder="请选择岗位">
                          <template v-for="item in positionList">
                           <el-option
                            :label="item.position"
                            :key="item.positionID"
                            :value="item.positionID"
                            v-if="item.positionID==form1.positionID"
                            selected
                           >
                          </el-option>
                          <el-option
                            :label="item.position"
                            :key="item.positionID"
                            :value="item.positionID"
                            v-else
                           >
                          </el-option>
                          </template>
                        </el-select>
                        
        </el-form-item>
        <el-form-item label="个性推广员" prop="isPersonalDistributor">
                        <el-select v-model="form1.isPersonalDistributor" placeholder="是否是个性推广员">
                           <template v-for="item in optionList">
                           <el-option
                            :label="item.name"
                            :key="item.value"
                            :value="item.value"
                            v-if="item.value==form1.isPersonalDistributor"
                            selected
                           >
                          </el-option>
                          <el-option
                            :label="item.name"
                            :key="item.value"
                            :value="item.value"
                            v-else
                           >
                          </el-option>
                          </template>
                        </el-select>
                        
        </el-form-item>
      <el-form-item class="form-btns">
                <el-button type="primary" @click="submitEdit">提交</el-button>
                <el-button @click="dialog1 = false">取 消</el-button>
      </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="清退" :visible.sync="dialog2" width="450px" :modal-append-to-body="false">
      <el-form :model="form2"  ref="form2" label-width="110px">
      <el-form-item label="清退原因" prop="kickoutReason">
      <el-input v-model="form2.kickoutReason" placeholder="请输入清退原因"></el-input>
      </el-form-item>
      <el-form-item class="form-btns">
                <el-button type="primary" @click="submitKickOut">提交</el-button>
                <el-button @click="dialog2 = false">取 消</el-button>
      </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      class="dialog"
      title="推广员详情"
      width="750px"
      top="8vh"
      :visible.sync="dialog"
      :modal-append-to-body="false"
    >
    <div class="row">
      <div class="row-item">
        <div class="key">岗位ID</div>
        <div class="value">{{item.positionID}}</div>
      </div>
      <div class="row-item">
        <div class="key">操作员ID</div>
        <div class="value">{{item.operatorID}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">有效期天数</div>
        <div class="value">{{item.validationDays}}</div>
      </div>
      <div class="row-item">
        <div class="key">保护期天数</div>
        <div class="value">{{item.protectionDays}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">成交次数</div>
        <div class="value">{{item.distributeTimes}}</div>
      </div>
      <div class="row-item">
        <div class="key">成交总金额</div>
        <div class="value">{{item.distributeAmount}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">是否是个性推广员</div>
        <div class="value">{{item.isPersonalDistributor}}</div>
      </div>
      <div class="row-item">
        <div class="key">绩效总额</div>
        <div class="value">{{item.totalIncome}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">合作机构</div>
        <div class="value">{{item.belongToCompany}}</div>
      </div>
      <div class="row-item">
        <div class="key">创建时间</div>
        <div class="value">{{item.createTime}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">申请备注</div>
        <div class="value">{{item.applyForComments}}</div>
      </div>
    </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchMarket from '@/components/SearchMarket'
import { queryDistributor,getDistributorList, getDistributorDetail,positionList,updateDistributor,kickOutDistributor } from '@/api'

export default {
  name: 'market-all',
  components: {
    SearchMarket
  },
  data() {
    return {
      dialog: false,
      total: 0,
      tableData: [],
      item: {},
      dialog1: false,
      dialog2: false,
      total: 0,
      form1:{},
      form2:{},
      positionList:{},
      optionList:[{name:'是',value:0},{name:'否',value:1}]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getDistributorList().then(res => {
        this.tableData = res
        this.total = res.length
        console.log(res)
      })
      positionList().then((res) => {
        this.positionList = res
      })
    },
    detail(row) {
      this.item = row
        this.dialog = true
      // getDistributorDetail(id).then(res => {
      //   this.item = res
      //   this.dialog = true
      //   console.log(res)
      // })

    },
    edit(row) {
      this.form1=row
      this.dialog1=true
    },
    submitEdit(){
      console.log(this.form1)
       updateDistributor(this.form1).then(res => {
          this.$message({
            message: '编辑完成',
            type: 'success'
          })
          this.getData()
          this.dialog1 = false
        })
    },
    kickOut(row) {
      this.form2=row
      this.dialog2=true
    },
    submitKickOut(){
       kickOutDistributor(this.form2).then(res => {
          this.$message({
            message: '已清退',
            type: 'success'
          })
          this.getData()
          this.dialog2 = false
        })
    },
    search(data) {
      queryDistributor(data).then(res => {
        console.log(res)
        this.tableData=res
        this.total = res.length
      })
    },
    output() {

    }
  }
}
</script>

<style scope lang="stylus" rel="stylesheet/stylus">
@import '../style/mixin.styl'
.row
  width 100%
  flex-row()
  .row-item
    flex 1
    line-height 30px
    display flex
    .key
      margin-right 10px
    .value
      color #f90
</style>